<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/yb' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="#/yb">课程管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>课程大类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button-group class="bunGrp">
      <el-button size="small" type="primary" @click="dialogVisible = true">新增</el-button>
      <el-button size="small" type="warning" @click="up()">修改</el-button>
      <el-button size="small" type="danger" @click="del()">删除</el-button>
    </el-button-group>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div class="login">
        <el-form
          :model="ruleForm"
          v-loading="loading"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="标题" prop="title">
            <el-input v-model="ruleForm.title" autofocus></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
    <template>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        height="60vh"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="id" width="180"></el-table-column>
        <el-table-column prop="title" label="课程名"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totols"
        :page-size="pagesize"
        style="padding-top:20px"
        :current-page="currentPage"
        @current-change="changepage"
      ></el-pagination>
    </template>
  </div>
</template>
<script>
import qs from "qs";
import { IP } from "../util/util";
export default {
  data() {
    return {
      loading:true,
      tableData: [],
      multipleSelection: [],
      fromtype: "add",
      totols: 10,
      pagesize: 5,
      currentPage: 1,
      dialogVisible: false,
      ruleForm: {
        title: ""
      },
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getdata();
    console.log(IP);
  },
  methods: {
    del() {
      let checked = this.multipleSelection;
      if (checked.length) {
        this.$confirm("确定要删除么？")
          .then(_ => {
            let ids = [];
            for (let i = 0; i < checked.length; i++) {
              ids.push(checked[i].id);
            }
            this.$ajax({
              // url: "http://" + IP + "/api.php/test/banner/" + ids.join(","),
              url: "http://" + IP + "/tp5/public/index.php/index/classes/del",
              method: "post",
              data: qs.stringify({
                id: ids.join(",")
              })
            }).then(res => {
              console.log(res);
              if (res) {
                this.getdata();
                this.$message.success("删除成功！");
              }
            });
          })
          .catch(_ => {});
      } else {
        this.$message.error("请先选择选项!!");
      }
    },
    add() {
      this.dialogVisible = true;
    },
    up() {
      let checked = this.multipleSelection;
      if (checked.length == 1) {
        this.fromtype = "up";
        this.dialogVisible = true;
        console.log(checked[0]);
        this.ruleForm = checked[0];
      } else {
        this.$message.error("请先选择一项!!");
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submitbanner();
        } else {
          this.$message.error("请输入必填项!!");
          return false;
        }
      });
    },
    submitbanner() {
      var upid = this.multipleSelection[0] ? this.multipleSelection[0].id : "";
      this.$ajax({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        // url: "http://" + IP + "/api.php/test/classes",
        url: "http://" + IP + "/tp5/public/index.php/index/classes/save",
        method: "post",
        // data: qs.stringify({
        //   title: this.ruleForm.title
        // })
        data: qs.stringify({
          title: this.ruleForm.title,
          type: this.fromtype,
          id: upid
        })
      }).then(res => {
        if (res) {
          this.$message.success(
            this.fromtype == "add" ? "添加成功！" : "修改成功！"
          );
          this.resetForm("ruleForm");
        }
      });
    },
    resetForm(formName) {
      this.dialogVisible = false;
      this.$refs[formName].resetFields();
      this.fromtype = "add";
      this.ruleForm = {
        title: "",
        url: "",
        w_url: ""
      };
      this.getdata();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    changepage(page) {
      if (this.currentPage != page) {
        this.currentPage = page;
        this.getdata();
      }
      // console.log(page)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    getdata() {
      // console.log(this.currentPage);
      this.$ajax({
        // url: "http://"+IP+"/api.php/test/classes",
        url: "http://" + IP + "/tp5/public/index.php/index/classes",
        method: "get",
        params: {
          pageCurrent: this.currentPage,
          pageSize: this.pagesize
        }
        // params: {
        //   transform: 1,
        //   order: "id,desc",
        //   page: `${this.currentPage},10`
        // }
      }).then(res => {
        this.loading = false;
        this.tableData = res.data.data.list;
        this.totols = res.data.data.count;
        // console.log(res.data.banner);
        // return;
        console.log(res);
      });
    }
  }
};
</script>

<style>
.bunGrp {
  margin-top: 10px;
}
</style>
